<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-align: center;
        }
        table {
            margin: 0 auto;
        }
        p {
            text-align: center;
        }
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>欢迎光临_vue开发的收银系统_水果店</h4>
        <table border="1" width="600" height="100">
          <caption>
            苹果10￥/斤，折扣/ < 8折 >
          </caption>
          <tbody>
            <tr>
              <td>
                <span>请输入你要购买的斤数</span>
                <input type="number" placeholder="请输入斤数" v-model.number="count" />
              </td>
            </tr>
            <tr>
              <td>
                <button @click="clickCount">结账买单</button>
              </td>
            </tr>
          </tbody>
        </table>
        <p>结账单：总价:{{totalPrice}}元 折后价:{{ totalPrice * 0.8 }}元 省了: {{ totalPrice - totalPrice * 0.8 }}元</p>
      </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                count:0,
                totalPrice:0

            },
            methods:{
                clickCount(){
                    return this.totalPrice = this.count * 10
                }
            },
        })
    </script>
</body>
</html>